<template>
  <div class="ModityPwd">
    <div class="ele-content">
      <p class="tent-title">修改密码</p>
      <el-form :rules="pattern" :model="BindForm">
        <el-form-item label="手机号码:">
          <el-col :span="15">
            <el-input />
          </el-col>
        </el-form-item>
        <el-divider />
        <el-form-item label="验证码:" prop="test">
          <el-col :span="10">
            <el-input />
          </el-col>
          <el-col :span="4" :offset="2">
            <el-button type="text">获取验证码</el-button>
          </el-col>
        </el-form-item>
        <el-divider />
        <el-form-item label="新密码:" prop="test">
          <el-col :span="15">
            <el-input />
          </el-col>
        </el-form-item>
        <el-divider />
        <el-form-item class="footer">
          <el-button type="primary">确认修改</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="ele-bottom">
      <pre>@ 2020-2021 互帮老宝贝 （苏州）科技有限公司</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModityPwd',
  data() {
    return {
      tCont: 60,
      isTrue: true,
      BindForm: {},
      pattern: {
        test: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    /** 提交 */
    getSubmit() {},
    /** 获取验证码 */
    getYzhengma() {
      this.isTrue = false
      setInterval(() => {
        this.tCont--
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.ModityPwd {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .el-divider--horizontal {
    margin: 0px;
  }
  .ele-content {
    border: 1px solid #e6e6e6;
    width: 400px;
    min-height: 320px;
    margin-top: 100px;
    padding: 0px 40px;
    .tent-title {
      font-size: 15px;
      font-weight: bold;
      margin: 30px 0px;
    }
    ::v-deep.el-form {
      .el-form-item__label {
        font-weight: 500;
      }
      .el-form-item {
        margin-bottom: 0;
        margin-top: 22px;
        .el-input__inner {
          padding: 0;
        }

        input {
          border: none;
          outline: none;
        }
      }
      .footer {
        margin-top: 30px;
        .el-button {
          width: 100%;
        }
      }
    }
  }
  .ele-bottom {
    font-size: 14px;
    color: gray;
    margin-top: 50px;
  }
}
</style>
